<template>
	<view>
		<uNavbar title="充值" bgColor="#211E38"></uNavbar>
		<view class="main">
			<view class="main_tit">
				充值金额
			</view>
			<view class="moneys flex_ld">
				<view class="flex_c moneys_box" v-for="(item,index) in toggleList" :key="index"
					@click="changeInx(item)">
					<text :class="item.id == ids ?'active':''">{{item.money}}</text>
				</view>
			</view>
		</view>
		<!-- <view class="information_box flex_dq">
			<text>阅读并且同意</text>
			<text class="underline" @click.stop="gotopuprule">《用户充值协议》</text>
		</view> -->
		<view class="btn" @click="gearList">
			充值
		</view>
	</view>
</template>

<script>
	import {
		Init,
		restore,
		finishTransaction,
		requestOrder
	} from "../../utils/pay.ios.js"
	import {
		addamout,
		notifyios
	} from "../../api/wallet.js";
	export default {
		data() {
			return {
				ids: 'universe.fuhe.platform128',
				moneys: '128.00',
				iapChannel: {},
				tttt: {},
				transactionReceipt: '', //ios返回交易凭证
				toggleList: [{
						id: 'universe.fuhe.platform128',
						money: "128.00"
					},
					{
						id: 'universe.fuhe.platform698',
						money: "698.00"
					},
					{
						id: 'universe.fuhe.platform1288',
						money: "1280.00"
					},
				],
				kkkk: ['universe.fuhe.platform128','universe.fuhe.platform698','universe.fuhe.platform1288']
			}
		},
		// onLoad() {
		// 	this.isAddamout()
		// },
		onShow() {
			this.obtainChannels()
		},
		methods: {
			changeInx(e) {
				console.log(e);
				this.ids = e.id
				this.moneys = e.money
			},
			gotopuprule() {
				uni.navigateTo({
					url: "/pagesMy/setting/topuprule"
				})
			},

			obtainChannels() {
				Init().then(res => {
					console.log(res)
					if (res.id === 'appleiap') {
						console.log('走这里---');
						this.iapChannel = res
						this.obtainRestore(res)
					}
				})
			},
			// 获取苹果服务器已支付且未关闭的交易列表
			obtainRestore(iapChannel) {
				console.log('承接上文', iapChannel);
				restore(iapChannel).then(res => {
					console.log('11111111111', res)
					this.closeOrder(res[0].transactionReceipt)
				})
			},
			// 关闭订单
			closeOrder(transactionReceipt) {
				// console.log('关闭订单', this.iapChannel);
				// console.log('订单信息---', transactionReceipt);
				finishTransaction(transactionReceipt, this.iapChannel).then(res => {
					console.log('关闭成功了', res)
				})
			},
			// 请求苹果档位列表
			gearList() {
				console.log('拉列表ios商品列表', );
				let productIds = this.kkkk;
				console.log(productIds);
				requestOrder(this.iapChannel, productIds).then(res => {
					console.log('拉起对应商品列表id', res)
					if (res.length > 0) {
						this.applePay()
					} else {
						console.log('ios暂无对应商品');
					}
				})
			},
			// 苹果支付
			applePay() {
				uni.showLoading({
					title: '加载中'
				});
				uni.requestPayment({
					provider: 'appleiap',
					orderInfo: {
						manualFinishTransaction: true, //true为手动关闭订单，false为自动关闭订单
						productid: this.ids, //档位id 
						optimize: true
					},
					success: (e) => {
						uni.hideLoading()
						console.log('支付成功回调', e);
						if (e.errMsg == 'requestPayment:ok') {
							this.transactionReceipt = e.transactionReceipt
							this.closeOrder(e.transactionReceipt)
							this.isAddamout()
						}
					},
					fail(err) {
						uni.hideLoading()
						uni.$u.toast('支付失败');
						console.log('失败', err);
					}
				})
			},
			isAddamout() {
				uni.showLoading({
					title: '加载中'
				});
				addamout({
					amount: this.moneys,
					pay_type: 5,
					client: 'app',
					password: ''
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					if (res.code == 1) {
						this.iosCallback(res.data.order_sn)
					} else {
						uni.$u.toast('支付失败');
					}
				})
			},
			iosCallback(orderSn) {
				console.log(orderSn);
				console.log(this.transactionReceipt);
				uni.showLoading({
					title: 'Loading'
				});
				notifyios({
					receipt_data: this.transactionReceipt,
					out_trade_no: orderSn,
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					if (res.code == 1) {
						uni.$u.toast('支付成功');
						setTimeout(function() {
							uni.navigateBack()
						}, 1500);
					} else {
						uni.$u.toast('支付失败');
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>
<style scoped>
	.main {
		width: 670rpx;
		/* height: 400rpx; */
		background: #342857;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 0 auto;
		margin-top: 56rpx;
	}

	.main_tit {
		width: 100%;
		padding: 20rpx 24rpx;
		font-size: 32rpx;
		color: #ffffff;
		border-bottom: 1rpx solid #ffffff50;

	}

	.moneys {
		width: 94%;
		margin: 50rpx auto 0;
		padding-bottom: 50rpx;
	}

	.moneys_box {
		width: 30%;
	}

	.moneys_box>text {
		width: 100%;
		text-align: center;
		padding: 16rpx 0;
		border-radius: 10rpx;
		background: #3c2f65;
		font-size: 28rpx;
		color: #ffffff;
	}

	.active {
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%) !important;
	}

	.btn {
		margin: 0 auto;
		margin-top: 150rpx;
		width: 670rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 40rpx;
	}

	.information_box {
		display: flex;
		align-items: flex-start;
		margin-left: 42rpx;
		margin-top: 30rpx;
	}

	.information_box>text {
		color: #A6A5AF;
		font-size: 24rpx;
	}

	.information_box>text:nth-child(2n) {
		color: #FF2CDF !important;
	}
</style>